<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../style/js/layuii/css/layui.css">
    <script src="../../../style/js/layuii/layui.js"></script>
    <script src="../../style/js/jquery-3.2.1.min.js"></script>
  <style>
  .layui-body {
      position: absolute;
      left: 200px;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 998;
      width: auto;
  }
    input{
        width: 220px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
    }
    #congYeBeginTime {
        width: 106px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
        padding-left: 16px;
    }
    #congYeEndTime {
        width: 106px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
        padding-left: 16px;
    }
    #liZhiBeginTime {
        width: 106px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
        padding-left: 16px;
    }
    #liZhiEndTime {
        width: 104px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
        padding-left: 16px;
    }
    #yuanGongBeginMoney {
        width: 106px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
        padding-left: 16px;
    }
    #yuanGongEndMoney {
        width: 104px;
        height: 20px;
        border: 1px solid #dddddd;
        font-size: 12px;
        padding-left: 16px;
    }
    body .layui-input{
        height: 24px;
        line-height: 1.3;
        line-height: 30px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 0;
    }

    body .layui-select{
        height: 24px;
        line-height: 1.3;
        line-height: 30px;
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 0;
    }
    .layui-form-select dl dd.layui-this {
        background-color: #5FB878;
        color: #fff;
        width: 250px;
    }
    .layui-form-select dl dd.layui-this {
        background-color: #60c7d0;
        color: #fff;
        width: 230px;
    }
    .layui-form-label{
        width: 100px;
        line-height: 5px;
        font-size: 12px;
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        position: absolute;
        left: -1px;
        top: -1px;
        padding: 1px;
        width: 100%;
        height: 100%;
        background-color: #60c7d0;
    }
    body .layui-table-cell {
      font-size: 12px;
    }
  </style>

</head>
<body style="font-size: 12px">
<div class="layui-row">
    <div class="layui-col-md12" style="text-align: center;margin-top: 2%;margin-bottom: 1%;">
        <span id="VouCher" style="font-weight: bold;font-size: 20px;">人员信息</span>
    </div>
</div>
<div style="width: 100%;margin-top: 40px;">
  <form class="layui-form" style="margin-left: -30px">
      <div class="layui-row">
          <div class="layui-inline">
              <label class="layui-form-label" style="margin-left: 0">员工姓名:</label>
              <div class="layui-input-inline">
                  <div class="layui-form-item " style="width: 250px;margin-left: 10px">
                      <select id="yuanGongName" lay-filter="yuanGongName" name="yuanGongName"
                              autocomplete="off" lay-search="" class="layui-input">
                          <option value="">请选择员工姓名</option>
                      </select>
                  </div>
              </div>
          </div>
          <div class="layui-inline">
              <div class="layui-input-inline">
                  <div class="layui-form-item " style="width: 350px">
                      <input id="sousuo" style="width: 325px;background-color: #60c7d0;border-radius: 0;color: #ffffff;text-align: center;margin-left: 57px;height: 24px;line-height: 24px" value="搜&nbsp;&nbsp;索" readonly/>
                  </div>
              </div>
          </div>
      </div>
  </form>
<div class="layui-row" style="margin-top: 0;font-size: 12px">
    <table id="renYuanXinXiList" lay-filter="renYuanXinXiList"></table>
</div>
</div>
</body>
<script>
    layui.use(['table','form','layer','element','jquery','laydate'],function(){
        var table=layui.table;
        var form=layui.form;
        var layer=layui.layer;
        var element=layui.element;
        var $=layui.jquery;
        var laydate=layui.laydate;

        //事件选择器加载
        laydate.render({
            elem:'#congYeBeginTime',
            type:'date',
        })
        laydate.render({
            elem:'#congYeEndTime',
            type:'date',
        })
        laydate.render({
            elem:'#liZhiBeginTime',
            type:'date',
        })
        laydate.render({
            elem:'#liZhiEndTime',
            type:'date',
        })


        //模糊搜索监听
        $("#sousuo").click(function(){
            let yuanGongName=$("#yuanGongName").val();
            let zhengJianHao=$("#zhengJianHao").val();
            let yuanGongPhone=$("#yuanGongPhone").val();
            let yuanGongBuMen=$("#yuanGongBuMen").val();
            let renYuanZhuangTai=$("#renYuanZhuangTai").val();
            let yuanGongBeginMoney=$("#yuanGongBeginMoney").val();
            let yuanGongEndMoney=$("#yuanGongEndMoney").val();
            let congYeBeginTime=$("#congYeBeginTime").val();
            let congYeEndTime=$("#congYeEndTime").val();
            let liZhiBeginTime=$("#liZhiBeginTime").val();
            let liZhiEndTime=$("#liZhiEndTime").val();
            let shiFouZuoZhang=$("#shiFouZuoZhang").val();
            let shiFouShenBao=$("#shiFouShenBao").val();

            //数据表格重载
            table.reload('renYuanXinXiList', {
                url: '/renYuanXinXi/queryUserBean'
                , where: {
                    "yuanGongName": yuanGongName,
                    "zhengJianHao": zhengJianHao,
                    "yuanGongPhone": yuanGongPhone,
                    "yuanGongBuMen": yuanGongBuMen,
                    "renYuanZhuangTai": renYuanZhuangTai,
                    "yuanGongBeginMoney": yuanGongBeginMoney,
                    "yuanGongEndMoney": yuanGongEndMoney,
                    "congYeBeginTime": congYeBeginTime,
                    "congYeEndTime": congYeEndTime,
                    "liZhiBeginTime": liZhiBeginTime,
                    "liZhiEndTime": liZhiEndTime,
                    "shiFouZuoZhang": shiFouZuoZhang,
                    "shiFouShenBao": shiFouShenBao,
                }
                , page: {curr: 1}
            });
        })

        //数据表格渲染
        table.render({
            elem: '#renYuanXinXiList'
            , url: '/renYuanXinXi/queryUserBean' //数据接口
            , cols: [[ //表头
                {title: '序号', fixed: 'left', type: 'numbers', width: "5%"}
                , {field: 'companyName', align: 'left', title: '客户公司名称', width: "23%"}
                , {field: 'xingMing', align: 'left', title: '姓名', width: "8%"}
                , {field: 'yuanGongGongZi', align: 'left', title: '员工工资', width: "8%"}
                , {field: 'xingBie', align: 'left', title: '姓别', width: "8%"}
                , {field: 'chuShengRiQi', align: 'left', title: '出生日期', width: "12%"}
                , {field: 'zhengZhaoLeiXing', align: 'left', title: '证照类型', width: "9%"}
                , {field: 'zhengZhaoHaoMa', align: 'left', title: '证照号码', width: "15%"}
                , {field: 'tel', align: 'left', title: '电话', width: "15%"}
                , {field: 'guoJiDiQu', align: 'left', title: '国籍', width: "8%"}
                , {field: 'renYuanZhuangTai', align: 'left', title: '人员状态', width: "8%",
                    templet: function (obj) {
                        if (obj.renYuanZhuangTai == 0) {
                            return "离职";
                        }
                        if (obj.renYuanZhuangTai == 1) {
                            return "在职";
                        }
                    }
                }
                , {field: 'yuanGongBuMen', align: 'left', title: '员工部门', width: "8%",
                    templet: function (obj) {
                        if (obj.yuanGongBuMen == 1) {
                            return "管理";
                        }
                        if (obj.yuanGongBuMen == 2) {
                            return "销售";
                        }
                        if (obj.yuanGongBuMen == 3) {
                            return "财务"
                        } else {
                            return "未设置"
                        }
                    }
                }
                , {field: 'liZhiTime', align: 'left', title: '离职时间', width: "12%"}
                , {field: 'congYeLeiXing', align: 'left', title: '从业类型', width: "8%"}
                , {field: 'congYeRiQi', align: 'left', title: '从业日期', width: "12%"}
                , {field: 'isShenBao', align: 'left', title: '是否申报', width: "7%",
                    templet: function (obj) {
                        if (obj.isShenBao == 0) {
                            return "不申报";
                        }
                        if (obj.isShenBao == 1) {
                            return "申报";
                        }
                    }
                }
                , {field: 'isZuoZhang', align: 'left', title: '是否做账', width: "7%",
                    templet: function (obj) {
                        if (obj.isZuoZhang == 0) {
                            return "不做账";
                        }
                        if (obj.isZuoZhang == 1) {
                            return "做账";
                        }
                    }
                }
                , {field: 'buZaiShenBaoTime', align: 'left', title: '不再申报时间', width: "12%"}
                , {field: 'jiGouName', align: 'left', title: '所属代理商', width: "15%"}
                , {field: 'tianJiaRenName', align: 'left', title: '提交人', width: "8%"}
                , {field: 'gengXinTime', align: 'left', title: '数据更新时间', width: "12%"}
                // , {fixed: 'right', title: '操作', toolbar: '#zhongZhiDemo', width: "8%"}
            ]]
            , page: true
            , limit: 10
        })

        //人员信息名字电话证件号回显
        $.get("/renYuanXinXi/quweyYuanGongXinXi",function(obj){
            console.log(obj)
            if(obj.code===0){
                for(let i=0;i<obj.data.length;i++){
                    $("#yuanGongName").append('<option>'+obj.data[i].xingMing+'</option>')
                    $("#yuanGongPhone").append('<option>'+obj.data[i].tel+'</option>')
                    $("#zhengJianHao").append('<option>'+obj.data[i].zhengZhaoHaoMa+'</option>')
                }
                form.render();
            }
        })
    })
</script>
</html>


















